<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="aui-fullpage">
    <div class="aui-header-1">
        <lv-group lvGutter="8px">
            <i lv-icon="aui-widget-datepicker-previous" [lvColorState]="true" (click)="gotoRecoveryDrill()"></i>
            <h1>{{ (isModify ? 'explore_modify_drill_plan_label' : 'explore_create_drill_plan_label') | i18n }}</h1>
        </lv-group>
    </div>
    <div class="aui-block">
        <lv-wizard [lvMode]="'icon'" [lvStatus]="'process'" [lvActiveIndex]="activeIndex">
            <lv-wizard-step>{{'explore_select_resource_label' | i18n}}</lv-wizard-step>
            <lv-wizard-step>{{'explore_drill_config_label' | i18n}}</lv-wizard-step>
            <lv-wizard-step>{{'common_summary_label' | i18n}}</lv-wizard-step>
        </lv-wizard>
        <!-- step1：选择资源 -->
        <div [ngClass]="{'visible': activeIndex === 0, 'hidden': activeIndex !== 0}" class="wizard-container">
            <lv-group lvGutter='12px' class="mgt-group aui-gutter-column-lg">
                <h3>{{'explore_drill_add_object_label' | i18n}}</h3>
                <span>{{'common_selected_num_label' | i18n:[resourceTableData?.data?.length || 0]}}</span>
            </lv-group>
            <lv-group lvGutter='12px' class="aui-gutter-column-md">
                <button lv-button lvType="primary" (click)="addResource()">
                    {{'common_add_label' | i18n}}
                </button>
                <button lv-button [disabled]="!selectionData.length" (click)="deleteResource()">
                    {{'common_delete_label' |i18n}}
                </button>
            </lv-group>
            <lv-pro-table #resourceTable [config]="resourceTableConfig" [data]="resourceTableData"></lv-pro-table>
            <ng-template #resourceTypeTpl let-item>
                <span lv-overflow>
                    {{getResourceType(item)}}
                </span>
            </ng-template>
        </div>
        <!-- step2：配置计划 -->
        <div [ngClass]="{'visible': activeIndex === 1, 'hidden': activeIndex !== 1}" class="wizard-container">
            <h3 class="mgt-group aui-gutter-column-lg">{{'explore_drill_plan_label' | i18n}}</h3>
            <lv-form [formGroup]="formGroup" lvKeepRequiredWidth>
                <lv-form-item>
                    <lv-form-label>
                        {{ 'explore_drill_plan_type_label' | i18n }}
                    </lv-form-label>
                    <lv-form-control>
                        <lv-radio-group formControlName="type" [lvGroupName]="'typeGroup'">
                            <lv-group [lvGutter]="'20px'">
                                <lv-radio [lvValue]="dataMap.drillType.period.value" [lvDisabled]="isModify">
                                    {{ dataMap.drillType.period.label | i18n }}
                                </lv-radio>
                                <lv-radio [lvValue]="dataMap.drillType.single.value" [lvDisabled]="isModify">
                                    {{ dataMap.drillType.single.label | i18n }}
                                </lv-radio>
                            </lv-group>
                        </lv-radio-group>
                    </lv-form-control>
                </lv-form-item>
                <lv-form-item>
                    <lv-form-label lvRequired>
                        {{'explore_drill_plan_name_label' | i18n}}
                    </lv-form-label>
                    <lv-form-control [lvErrorTip]="nameErrorTip">
                        <input lv-input type="text" formControlName="name" class="form-control-input" />
                    </lv-form-control>
                </lv-form-item>
                <ng-container *ngIf="formGroup.value.type === dataMap.drillType.period.value; else elseTemplate">
                    <lv-form-item>
                        <lv-form-label lvRequired>
                            {{'explore_drill_period_label' | i18n}}
                        </lv-form-label>
                        <lv-form-control [lvErrorTip]="retentionDurationErrorTip">
                            <lv-input-group [lvAddAfter]="unitTpl" class="input-group-select-right form-control-input">
                                <input lv-input formControlName="retentionDuration" placeholder="{{formGroup.value.durationUnit === dataMap.recoveryDrillUnit.hour.value
                                        ? '1~23'
                                        : formGroup.value.durationUnit === dataMap.recoveryDrillUnit.day.value
                                        ? '1~365'
                                        : formGroup.value.durationUnit == dataMap.recoveryDrillUnit.month.value
                                        ? '1~24'
                                        : '1~10'}}" />
                            </lv-input-group>
                            <ng-template #unitTpl>
                                <lv-select [lvOptions]="durationUnitOptions" formControlName="durationUnit"
                                    class="unit-inner-select" lvValueKey="value"></lv-select>
                            </ng-template>
                        </lv-form-control>
                    </lv-form-item>
                    <lv-form-item>
                        <lv-form-label lvRequired>
                            {{'protection_last_time_label' | i18n}}
                        </lv-form-label>
                        <lv-form-control>
                            <lv-date-picker formControlName="startTime" lvShowTime="true" class="form-control-input"
                                [lvFooterExtra]="startTimeDateTpl">
                            </lv-date-picker>
                        </lv-form-control>
                    </lv-form-item>
                </ng-container>
                <ng-template #elseTemplate>
                    <lv-form-item>
                        <lv-form-label>
                            {{ 'explore_drill_execute_time_label' | i18n }}
                        </lv-form-label>
                        <lv-form-control>
                            <lv-radio-group formControlName="executeType" [lvGroupName]="'typeGroup'">
                                <lv-group [lvGutter]="'20px'">
                                    <lv-radio [lvValue]="drillExecuteType.Immediately">
                                        {{ 'explore_drill_execute_immediately_label' | i18n }}
                                    </lv-radio>
                                    <lv-radio [lvValue]="drillExecuteType.Specified">
                                        {{ 'explore_drill_execute_specified_label' | i18n }}
                                    </lv-radio>
                                </lv-group>
                            </lv-radio-group>
                        </lv-form-control>
                    </lv-form-item>
                    <lv-form-item *ngIf="formGroup.value.executeType === drillExecuteType.Specified">
                        <lv-form-label></lv-form-label>
                        <lv-form-control [lvErrorTip]="timeErrorTip">
                            <lv-date-picker formControlName="executeTime" lvShowTime="true" class="form-control-input"
                                [lvFooterExtra]="executeTimeDateTpl">
                            </lv-date-picker>
                        </lv-form-control>
                    </lv-form-item>
                </ng-template>
            </lv-form>
            <h3 class="mgt-group aui-gutter-column-lg">
                {{'explore_drill_execute_config_label' | i18n}}
            </h3>
            <lv-alert lvType="info" lvClosable="false">
                {{(formGroup.value.type === dataMap.drillType.period.value ? 'explore_drill_perid_tip_label' :
                'explore_drill_single_tip_label') | i18n}}
            </lv-alert>
            <ng-container *ngIf="hasTdsqlRecovery()">
                <lv-alert lvType="info" lvClosable="false">
                    {{'explore_drill_tdsql_tip_label' | i18n}}
                </lv-alert>
            </ng-container>
            <ng-container *ngIf="formGroup.value.type === dataMap.drillType.period.value && hasNoDestoryMount()">
                <lv-alert lvType="warning" lvClosable="false">
                    {{'explore_drill_unmount_label' | i18n}}
                </lv-alert>
            </ng-container>
            <ng-container *ngTemplateOutlet="tableTpl; context: { $implicit: true}"></ng-container>
        </div>
        <!-- step3：总览 -->
        <div [ngClass]="{'visible': activeIndex === 2, 'hidden': activeIndex !== 2}" class="wizard-container">
            <h3 class="mgt-group aui-gutter-column-lg">{{'explore_drill_plan_label' | i18n}}</h3>
            <lv-form>
                <lv-form-item>
                    <lv-form-label>
                        {{ 'explore_drill_plan_type_label' | i18n }}
                    </lv-form-label>
                    <lv-form-control>
                        <span>{{formGroup.value.type | textMap:'drillType'}}</span>
                    </lv-form-control>
                </lv-form-item>
                <lv-form-item>
                    <lv-form-label>
                        {{'explore_drill_plan_name_label' | i18n}}
                    </lv-form-label>
                    <lv-form-control>
                        <span>{{formGroup.value.name}}</span>
                    </lv-form-control>
                </lv-form-item>
                <ng-container *ngIf="formGroup.value.type === dataMap.drillType.period.value">
                    <lv-form-item>
                        <lv-form-label>
                            {{'explore_drill_period_label' | i18n}}
                        </lv-form-label>
                        <lv-form-control>
                            <span>{{formGroup.value.retentionDuration}}</span>
                            <ng-container *ngIf="_isEn; else elseChTemplate">
                                <span>&nbsp;{{formGroup.value.durationUnit | textMap:'recoveryDrillUnit'}}</span>
                            </ng-container>
                            <ng-template #elseChTemplate>
                                <span>{{formGroup.value.durationUnit | textMap:'recoveryDrillUnit'}}</span>
                            </ng-template>
                        </lv-form-control>
                    </lv-form-item>
                    <lv-form-item>
                        <lv-form-label>
                            {{'protection_last_time_label' | i18n}}
                        </lv-form-label>
                        <lv-form-control>
                            <span>{{formGroup.value.startTime | date: 'yyyy-MM-dd HH:mm:ss'}}</span>
                        </lv-form-control>
                    </lv-form-item>
                </ng-container>
                <ng-container *ngIf="formGroup.value.type !== dataMap.drillType.period.value">
                    <lv-form-item>
                        <lv-form-label>
                            {{ 'explore_drill_execute_time_label' | i18n }}
                        </lv-form-label>
                        <lv-form-control>
                            <lv-group lvGutter='12px'>
                                <span>
                                    {{(formGroup.value.executeType === drillExecuteType.Immediately ?
                                    'explore_drill_execute_immediately_label' : 'explore_drill_execute_specified_label')
                                    |
                                    i18n}}
                                </span>
                                <span *ngIf="formGroup.value.executeType === drillExecuteType.Specified">
                                    {{formGroup.value.executeTime | date: 'yyyy-MM-dd HH:mm:ss'}}
                                </span>
                            </lv-group>
                        </lv-form-control>
                    </lv-form-item>
                </ng-container>
            </lv-form>
            <h3 class="mgt-group aui-gutter-column-lg">
                {{'explore_drill_execute_config_label' | i18n}}
            </h3>
            <ng-container *ngTemplateOutlet="tableTpl; context: { $implicit: false}"></ng-container>
        </div>
        <!-- 操作区域 -->
        <div class="lv-modal-btns">
            <lv-group lvGutter='8px'>
                <button *ngIf="activeIndex !== 0" lv-button (click)='previous()'>
                    {{ 'common_previous_label' | i18n}}
                </button>
                <button *ngIf="activeIndex !== 2" lv-button lvType='primary' (click)='next()'
                    [disabled]="nextBtnDisabled">
                    {{'common_next_label' | i18n }}
                </button>
                <button *ngIf="activeIndex === 2" lv-button (click)='finish()' lvType='primary' [lvLoading]='isLoading'>
                    {{'common_finish_label' | i18n }}
                </button>
                <button lv-button (click)='canel()'>{{ 'common_cancel_label' | i18n }}</button>
            </lv-group>
        </div>
    </div>
</div>

<ng-template #tableTpl let-isConfigTable>
    <lv-datatable [lvData]="configTableData" [lvPaginator]="page" lvCompareWith="uuid" #lvTable lvResize>
        <thead>
            <tr>
                <th><span lv-overflow>{{'explore_drill_resource_name_label' | i18n}}</span></th>
                <th><span lv-overflow>{{'common_resource_type_label' | i18n}}</span></th>
                <th><span lv-overflow>{{'common_location_label' | i18n}}</span></th>
                <th width="250px">
                    <span lv-overflow>{{'explore_drill_type_label' | i18n}}</span>
                </th>
                <th><span lv-overflow>{{'common_system_type_label' | i18n}}</span></th>
                <th>
                    <span lv-overflow>{{'explore_destroy_drill_label' | i18n}}</span>
                </th>
                <th width="250px" *ngIf="formGroup.value.type === dataMap.drillType.single.value">
                    <span lv-overflow>{{'common_time_stamp_label' | i18n}}</span>
                </th>
                <th width="250px">
                    <span lv-overflow>{{'explore_drill_setting_label' | i18n}}</span>
                </th>
                <th width="220px">
                    <span lv-overflow>{{'explore_drill_valid_script_label' | i18n}}</span>
                </th>
                <th width='110px'>{{'common_operation_label'| i18n }}</th>
            </tr>
        </thead>
        <tbody>
            <ng-container *ngFor="let item of lvTable.renderData; let i=index">
                <ng-container *ngIf="isConfigTable; else elseTrTemplate">
                    <tr>
                        <ng-container
                            *ngTemplateOutlet="trTpl; context: { isConfigTable: isConfigTable, item: item}"></ng-container>
                    </tr>
                </ng-container>
                <ng-template #elseTrTemplate>
                    <tr>
                        <ng-container
                            *ngTemplateOutlet="trTpl; context: { isConfigTable: isConfigTable, item: item}"></ng-container>
                    </tr>
                </ng-template>
            </ng-container>
        </tbody>
    </lv-datatable>
    <lv-paginator #page [lvPageSizeOptions]="sizeOptions" [lvPageSize]="pageSize" [lvTotal]="configTableData?.length"
        [lvPageIndex]="pageIndex" [hidden]="configTableData?.length <= 10">
    </lv-paginator>
</ng-template>

<ng-template #trTpl let-isConfigTable="isConfigTable" let-item="item">
    <td>
        <span lv-overflow>{{item.name}}</span>
    </td>
    <td>
        <span lv-overflow>
            {{getResourceType(item)}}
        </span>
    </td>
    <td>
        <span lv-overflow>{{item.path}}</span>
    </td>
    <td>
        <!-- 演练可以支持选择挂载或者恢复 -->
        <ng-container
            *ngIf="isConfigTable && isSupportMount(item.subType) && !isLogCopy(item); else elseDrillTypeTemplate">
            <lv-select [lvOptions]="mountTypeOptions" lvValueKey="value" [(ngModel)]="item.mountType"
                (ngModelChange)='mountTypeChange(item)' class="table-item">
            </lv-select>
        </ng-container>
        <ng-template #elseDrillTypeTemplate>
            <span lv-overflow>
                {{(isUseLivemountType(item) ? 'common_live_mount_lower_label' : 'common_restore_label') | i18n}}
            </span>
        </ng-template>
    </td>
    <td>
        <span lv-overflow>{{item.environment?.osType | textMap:'Os_Type'}}</span>
    </td>
    <td>
        <ng-container *ngIf="isUseLivemountType(item); else elseEmptyTemplate">
            <ng-container *ngIf="isConfigTable; else elseMountTemplate">
                <lv-select [lvOptions]="mountOptions" lvValueKey="value" [(ngModel)]="item.mountConfig">
                </lv-select>
            </ng-container>
            <ng-template #elseMountTemplate>
                <span lv-overflow>{{item.mountConfig | textMap: 'drillMountConfig'}}</span>
            </ng-template>
        </ng-container>
    </td>
    <td *ngIf="formGroup.value.type === dataMap.drillType.single.value">
        <ng-container *ngIf="isConfigTable; else elseCopyTemplate">
            <lv-select [lvOptions]="item.copyOptions" lvValueKey="value" class="table-item"
                [(ngModel)]="item.copyConfig" (ngModelChange)='copyChange(item)' lvShowFilter lvFilterKey='label'
                lvFilterMode='contains'>
            </lv-select>
        </ng-container>
        <ng-template #elseCopyTemplate>
            <span lv-overflow>
                {{ _find(item.copyOptions, {value:item.copyConfig})?.label | nil}}
            </span>
        </ng-template>
    </td>
    <td>
        <ng-container *ngIf="!item.recoveryConfig || !isCopyExist(item); else elseRecoveryTemplate">
            <span
                [ngClass]="{'aui-link-disabled': !item.copyConfig && formGroup.value.type === dataMap.drillType.single.value, 'aui-link':item.copyConfig || formGroup.value.type === dataMap.drillType.period.value}"
                (click)="setRecovery(item)">
                {{'explore_drill_not_setted_label' | i18n}}
            </span>
        </ng-container>
        <ng-template #elseRecoveryTemplate>
            <lv-group lvGutter='8px' *ngIf="isConfigTable">
                <span>{{'explore_drill_setted_label' | i18n}}</span>
                <span class="aui-link" (click)="setRecovery(item)">
                    {{'common_modify_label' | i18n}}
                </span>
            </lv-group>
            <span *ngIf="!isConfigTable">
                {{'protection_configured_status_label' | i18n}}
            </span>
        </ng-template>
    </td>
    <td>
        <ng-container *ngIf="!item.scriptConfig; else elseScriptTemplate">
            <span class="aui-link" (click)="setScript(item)" *ngIf="isConfigTable">
                {{'explore_drill_add_script_label' | i18n}}
            </span>
            <span *ngIf="!isConfigTable">
                {{'protection_not_configured_status_label' | i18n}}
            </span>
        </ng-container>
        <ng-template #elseScriptTemplate>
            <lv-group lvGutter='8px' *ngIf="isConfigTable">
                <span>{{'explore_drill_added_label' | i18n}}</span>
                <span class="aui-link" (click)="setScript(item)">
                    {{'common_modify_label' | i18n}}
                </span>
            </lv-group>
            <span *ngIf="!isConfigTable">
                {{'protection_configured_status_label' | i18n}}
            </span>
        </ng-template>
    </td>
    <td width='110px'>
        <span class="aui-link" (click)="deleteResource(item)">
            {{'common_delete_label' | i18n}}
        </span>
    </td>
</ng-template>

<ng-template #elseEmptyTemplate>
    --
</ng-template>

<ng-template #startTimeDateTpl>
    <button lv-button lvType="link" class="time-picker-current" (click)="setSysTime('startTime')">
        {{ 'common_current_time_label' | i18n }}
    </button>
</ng-template>

<ng-template #executeTimeDateTpl>
    <button lv-button lvType="link" class="time-picker-current" (click)="setSysTime('executeTime')">
        {{ 'common_current_time_label' | i18n }}
    </button>
</ng-template>